<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1(){
            let btn = document.getElementById("btn");
            // 取值
            console.log("type属性值:"+btn.type);
            console.log("id属性值:"+btn.id);
            console.log("name属性值:"+btn.name);
            console.log("value属性值:"+btn.value);
            console.log("onclick属性值:"+btn.onclick);
            // DOM中没有HTML的自定义属性
            console.log("a属性值:"+btn.a); // undefined

            // 赋值
            btn.type = "text";
            btn["value"]="我是文本框"
        }

        function f2(){
            // 获取HTML属性,也是通过DOM对象获取的
            let btn = document.getElementById("btn2");

            // 取值
            console.log("type属性值:"+btn.getAttribute("type"));
            console.log("id属性值:"+btn.getAttribute("id"));
            console.log("name属性值:"+btn.getAttribute("name"));
            console.log("value属性值:"+btn.getAttribute("value"));
            console.log("onclick属性值:"+btn.getAttribute("onclick"));
            console.log("a属性值:"+btn.getAttribute("a"));

            // 赋值
            btn.setAttribute("type","text");
            btn.setAttribute("value","我的通过HTML属性操作的");
        }
    </script>
</head>
<body>
<input type="button" id="btn" name="test" a="b" onclick="f1()" value="访问DOM属性"><br>
<input type="button" id="btn2" name="test" a="b" onclick="f2()" value="访问HTML属性"><br>
</body>
</html>